<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>测试DIV</title>
	</head>
	<body>
		<!-- 
		border:设置DIV的边框样式
		-->
		<div style="border:dotted 4px black; background-color:Yellow; width:100px;height:100px;">
		</div>
		<!-- 
		 border-style:设置边框的样式。 
		 border-width:设置边框的宽度。 
		 border-color：设置边框的颜色。 
		 -->
		<label style="font-size:14px;">选择样式：</label>
		<select id="bstyle" οnchange="document.getElementById('tdd').style.borderStyle=this.options[this.selectedIndex].text;">
			<option selected="selected">none</option>
			<option>dashed</option>
			<option>dotted</option>
			<option>groove</option>
			<option>hidden</option>
			<option>inset</option>
			<option>outset</option>
			<option>ridge</option>
			<option>double</option>
			<option>solid</option>
		</select>
		<div id="tdd" style="border-style:solid; border-width:2px; border-color:blue; width:100px;height:100px;background-color:gold;">
		</div>
		<!-- 
		 border是对四个边框同时进行设置。也可以单独对某一边或几个边进行设置，此时用以下属性： 
		 border-top:设置上边框样式。 
		 border-bottom:设置下边框样式。 
		 border-left:设置左边框样式。 
		 border-right:设置右边框样式。 
		 说明：某一边框的某一样式也可单独设置，以上边框为例可以用：border-top-style、border-top-width、border-top-color来分别设置，由于使用各border相同，所以不在举例说明。 
		 display:设置显示属性。其值有block、none,如果为none，div将不显示。 
		 float:设置DIV在页面上的流向，其值有left(靠左显示)、right(靠右显示)、none。 
		 background:设置DIV的背景样式。 
		 -->
		<div style="width:600px;height:200px; background:yellow url(mw3.jpg) repeat scroll; overflow:auto;border-top:dotted;border-bottom:solid;
			border-left:inset;border-right:double;display:block">
		</div>
	</body>
</html>
